<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_动画操作-动画初体验</title>
</head>
<body>

  <button class="show">显示</button>
  <button class="hide">隐藏</button>
  <button class="toggle">切换</button>

  <div class="animation-box">animation-box</div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      let $box = $('.animation-box')

      $box.css({
        width: '200px',
        height: '200px',
        background: 'pink',
      })

      $('.show').on('click', function() {
        $box.animate({
          width: '200px',
          height: '200px',
          opacity: '1',
          background: 'pink',
        }, 2000, 'swing', function() {
          console.log('动画执行完毕show')
        })
      })

      $('.hide').on('click', function() {
        $box.animate({
          width: '0',
          height: '0',
          opacity: '0',
          background: 'pink',
        }, 2000, function() {
          console.log('动画执行完毕hide')
        })
      })

      $('.toggle').click(function() {
        $box.animate({
          opacity: 'toggle',
          height: 'toggle',
          width: 'toggle'
        }, 2000, function() {
          console.log('动画执行完成')
        })
      })

    })

  </script>
  
</body>
</html>